<template>
  <div class="container">
    <transition name="fade">
      <div v-if="questionsState">
        <div class="box" v-for="item in questions">
          <div class="box-header">
            <div class="time"><span class="icon"></span><span class="date">申请时间：{{ item.applyTime }}</span><span class="status" v-text="item.state"></span></div>
          </div>
          <router-link :to="{path:'/recycle/list/listMore', query:{orderId:item.id}}">
          <div class="box-body">
            <div class="logobox">
              <img v-if="!item.evalDetail" :src="getBrandUrl(item.brandName)?getBrandUrl(item.brandName):require('../styles/asset/other.jpg')" alt="" />
              <img v-else :src="getBrandUrl(evalDetailTitle(item.evalDetail,0))?getBrandUrl(evalDetailTitle(item.evalDetail,0)):require('../styles/asset/other.jpg')" alt="" />
              <div class="right"  v-if="!item.evalDetail">
                <div class="text" v-text="item.brandName"></div>
                <div class="money" ><span style="color:#666666;">成交方式：</span>{{ item.convertAmount  }}元余额</div>
              </div>
              <div class="right"  v-else>
                <div class="text" v-text="evalDetailTitle(item.evalDetail,0)"></div>
                <div class="money" ><span style="color:#666666;">评估参考价：</span>{{ item.evalAmount }}</div>
              </div>
            </div>
          </div>
          </router-link>
          <div class="box-footer">
          <div v-if="item.state == '待确认'">
            <input type="button" value="取消订单" class="cancelBtn"  @click="cancellation(item)" />
          </div>
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div v-if="!questionsState" class="box_bg">
        <img src="../styles/asset/no-detail-bg.png" />
        <p class="nothing">&nbsp;</p>
        <p class="nothing">暂无申请</p>
      </div>
    </transition>
    <transition name="slide-fade-m">
      <div class="popbg" v-if="alert.key">
        <div class="modal" v-if="alert.value == 'success'">
          <div class="thumbnail">
            <img src="../styles/asset/success.png" />
          </div>
          <p v-text="alert.msg"></p>
        </div>
        <div class="modal" v-if="alert.value == 'fail'">
          <div class="thumbnail">
            <img src="../styles/asset/fail.png" />
          </div>
          <p v-text="alert.msg"></p>
        </div>
      </div>
    </transition>
    <simplert @confirm="submitCancel"   ref="simplert"></simplert>
  </div>
</template>

<script>
  import Simplert from '../../components/dialog/dialog.vue'

  let filters = {
    selected:function(options,text) {
      let url = '';
      options.forEach(function (e, index) {
        if (e.text === text) {
          url = e.linkurl
        }
      })
      return url;
    }
  }

  export default {
      data () {
          return {
            questions:[],
            questionsState: true,
            detail:{},
            areaCode:"",
            state: true,
            token:"",
            alert: {
              key: false,
              value: 'success',
              msg:"",
            },
            item:{},
            options:[
              {text:"小刀",value:0,selected:false,linkurl:require('../styles/asset/logoxd.jpg')},
              {text:"爱玛",value:0,selected:false,linkurl:require('../styles/asset/logoam.jpg')},
              {text:"雅迪",value:0,selected:false,linkurl:require('../styles/asset/logoyd.jpg')},
              {text:"新日",value:0,selected:false,linkurl:require('../styles/asset/logoxr.jpg')},
              {text:"绿源",value:0,selected:false,linkurl:require('../styles/asset/logoly.jpg')},
              {text:"新大洲",value:0,selected:false,linkurl:require('../styles/asset/logoxdz.jpg')},
              {text:"速派奇",value:0,selected:false,linkurl:require('../styles/asset/logospq.jpg')},
              {text:"台铃",value:0,selected:false,linkurl:require('../styles/asset/logotl.jpg')},
              {text:"小鸟",value:0,selected:false,linkurl:require('../styles/asset/logoxn.jpg')},
              {text:"比德文",value:0,selected:false,linkurl:require('../styles/asset/logobdw.jpg')},
              {text:"洪都",value:0,selected:false,linkurl:require('../styles/asset/logohd.jpg')},
              {text:"宝岛",value:0,selected:false,linkurl:require('../styles/asset/logobd.jpg')},
              {text:"立马",value:0,selected:false,linkurl:require('../styles/asset/logolm.jpg')},
              {text:"其他品牌",value:0,selected:false,linkurl:false}
            ],
          }
      },
    mounted(){
      const that = this;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getOrderList();
      })
    },
    computed:{

    },
    components: {
      Simplert
    },
    methods: {
      getBrandUrl:function(text){
          return filters.selected(this.options,text)
      },
      cancellation: function (item) {
        this.item = item;
        this.openMessage("确认取消订单吗？");
      },
      submitCancel: function(){
        this.$api.post('/reclaim/v1/authApi/cancelReclaim?orderId='+this.item.id,{},s=>{
          this.item.state = "回收失败";
          this.alert.key = true;
          this.alert.value = "success";
          this.alert.msg = "取消成功！";
          setTimeout(() => {
            this.alert.key = false;
          }, 2000)
        }, f =>{
          this.alert.key = true;
          this.alert.value = "fail";
          this.alert.msg = f.errorMessage;
          setTimeout(() => {
            this.alert.key = false;
          }, 2000)
        },{
          "token": this.token
        })
      },
      openMessage(title, message, type, onConfirm) {
        let obj = {
          title: title,
          message: message,
          type: type,
          useConfirmBtn:true,
          onConfirm:onConfirm
        };
        this.$refs.simplert.openSimplert(obj)
      },
      getOrderList(){
        this.$api.post('/reclaim/v1/authApi/reclaimList',{},s=>{
          let online = []
          let offline = []
          this.questions = s.module;
          this.questions.forEach(function(e,index){
            if(e.evalDetail !== null){
              online.push(e)
            }else{
              offline.push(e)
            }
          });
          if(this.questions.length  === 0)
          {
            this.questionsState = false
          }
        },f=>{
        },{
          "token": this.token
        })
      },
      evalDetailTitle(value,num){
          if(value == null)
          {
              return
          }
        let val = '{"text":'+ value + '}';
        val = JSON.parse(val);
        return val.text[num].text;
      },
    }
  };
</script>

<style scoped>
@import "../styles/styles.css";

a,input,button{-webkit-tap-highlight-color:rgba(255,0,0,0);}
.box_bg { margin:0 auto; width: 50%;  height:90%; text-align: center; font-size: 14px}
.box_bg img {  width: 100%;  margin-top: 120%; }
.container {  height: 100%;  background-color: #F5F5F5; overflow-y: scroll;}
div,span {  margin:0;  padding: 0;  }
input{  background:none;  outline:none;  border:0px;  -webkit-appearance: none;  }

.box{ position: relative; width: 100%;  padding-top: 0.2rem;}
.box .box-header {  border-bottom: 1px solid #f5f5f5;  position: relative;  }
.box .icon {  width: 0.1rem;  padding: 0.2rem 0;  background: #000000;  display: block;  border-radius: 0 0.4rem 0.4rem 0;  position: absolute;  top: 0.18rem;  left:0;  }
.box .date {  width: 100%;  display: block;  padding: 0.2rem 0 0.2rem 0.2rem;  }
.box .status {  position: absolute;  top:25%;  right: 0.2rem;  color:#ff5555;  }
.box .box-body {  height: 100%;  }
.box .logobox {  padding: 0.2rem 0;  border-bottom: 1px solid #f5f5f5;  }
.box-header,.box-footer,.box-body{background: #ffffff;}
.logobox img {  width: 20%;  box-sizing: border-box;  display: inline-block;  margin: 0 0 0 5%;  }
.box .right {  width: 60%;  padding: 0.1rem 0 0 0.2rem;  display: inline-block;  }
.box .money {  margin: 0.24rem 0 0 0;  }
.box .box-footer {  text-align: right; height: 0.84rem; line-height: 0.84rem; padding-bottom: 0.1rem;}
.box .cancelBtn { font-size:14px; width: 25%;  padding: 0.1rem 0;  background-color: #ffffff;  border: 1px solid #bfbfbf;  border-radius: 0.3rem;  margin-right: 0.2rem;  }
.popbg{ width: 100%; height: 100%; background:rgba(0,0,0,0.5); display:flex; justify-content: center; align-items: center;  position: absolute; top:0; left:0; z-index: 101;}
.modal{ width: 60%; background: #fff; border-radius: 0.2rem;}
.modal>.thumbnail{ padding: 0.4rem 0.2rem 0.2rem; text-align: center;}
.modal>.thumbnail>img{ width: 1.4rem; margin: 0 auto;}
.modal p{ text-align: center; margin-bottom: 0.21rem; font-size: 18px;}

</style>


